<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <!-- 发票号 -->
    <el-form-item label="发票号：" prop="invoiceNumber">
      <el-input v-model="ruleForm.invoiceNumber" />
    </el-form-item>
     <!-- 开票单位 -->
    <el-form-item label="开票单位：" prop="InvoicingUnit">
      <el-input v-model="ruleForm.InvoicingUnit" />
    </el-form-item>
    <!-- 发票类型 -->
    <el-form-item label=" 发票类型：" prop="invoiceType">
       <el-radio-group v-model="ruleForm.invoiceType">
        <el-radio :label="1">普通发票</el-radio>
        <el-radio :label="2">增值税发票</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 发票金额 -->
    <el-form-item label="发票金额：" prop="invoiceMoney">
      <el-input v-model="ruleForm.invoiceMoney" />
    </el-form-item>
    <!-- 税  率 -->
    <el-form-item label="税  率：" prop="invoiceRate">
      <el-input v-model="ruleForm.invoiceRate" />
    </el-form-item>
    <!-- 税额-->
<el-form-item label="税额：" prop="invoiceTax">
  <el-input v-model="invoiceTax" disabled/>
    </el-form-item>
    <!-- 开票日期 -->
     
    <el-form-item label="开票日期：" prop="invoiceDate">
          <el-date-picker
            v-model="ruleForm.invoiceDate"
            type="date"
            aria-label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
    </el-form-item>
    <!-- 备  注 -->
    <el-form-item label="备  注：" prop="invoiceRemark">
      <el-input v-model="ruleForm.invoiceRemark" />
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref,computed, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';

const route = useRoute();
const router = useRouter();


// 定义表单数据类型
interface RuleForm {
  invoiceNumber: string
  InvoicingUnit: string
  invoiceType: string
  invoiceMoney: string
  invoiceRate: string
  // invoiceTax: string
  invoiceDate: string
  invoiceRemark: string
  // firmId: string
  // userId: string
}

// 定义表单大小
const formSize = ref<ComponentSize>('default')
// 定义表单实例
const ruleFormRef = ref<FormInstance>()
// 定义表单数据
const ruleForm = reactive<RuleForm>({
  invoiceNumber: '',
  InvoicingUnit: '',
    invoiceType:'',
    invoiceMoney: '',
    invoiceRate: '',
    // invoiceTax: '',
    invoiceDate: '',
    invoiceRemark: '',
    // firmId: '',
    // userId:'',
})

// 定义计算属性
const invoiceTax = computed(() => {
  const invoiceMoney = parseFloat(ruleForm.invoiceMoney)
  const invoiceRate = parseFloat(ruleForm.invoiceRate)
  if (isNaN(invoiceMoney) || isNaN(invoiceRate)) {
    return 0
  }
  return (invoiceMoney * invoiceRate / 100).toFixed(2)
})

// 定义表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  invoiceNumber: [
    { required: true, message: '货主单号不能为空', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  // invoiceType: [
  //    { required: true, message: '发票类型不能为空', trigger: 'blur' },
  //   ],
  invoiceMoney: [
      { required: true, message: '发票金额不能为空', trigger: 'blur' },
    ],
  invoiceRate: [
    { required: true, message: '税  率不能为空', trigger: 'blur' },
    ],
  // invoiceTax: [
  //   { required: true, message: '税额不能为空', trigger: 'blur' },
  //   ],
  invoiceRemark: [
    { required: true, message: '备  注不能为空', trigger: 'blur' },
  ],
  invoiceDate: [
    {
      type: 'date',
      required: true,
      message: '请选择日期',
      trigger: 'change',
    },
  ],
  // firmId: [
  //   { required: true, message: '公司ID不能为空', trigger: 'blur' },
  //   ],
  // userId: [
  //   { required: true, message: '备 注不能为空', trigger: 'blur' },
  // ],
})

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("Settlementwrite/api/Invoices/Adds", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success('添加成功')
            router.push('/OutputInvoicesList')
          } else {
             ElMessage.success('添加失败')
          }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>
<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex; /* 添加这一行 */
    justify-content: center; /* 添加这一行 */
}
</style>